<template>
    <div class="balance-water">
        <page-main>
            <div class="flc">
                <h3 style="margin-right: auto;">余额流水</h3>
                <el-button type="primary" icon="el-icon-search" class="my-btn">搜索</el-button>
            </div>
            <el-form ref="search" :model="search" label-width="80px" size="small">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="订单号">
                            <el-input v-model="search.ordersn" placeholder="请输入订单号" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="手机号">
                            <el-input v-model="search.mobile" placeholder="请输入手机号" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="操作时间">
                            <el-date-picker
                                v-model="search.joinTime"
                                size="small"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                @change="changeTime"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="备注">
                            <el-input placeholder="请输入备注" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-table
                :data="tableData"
                :header-cell-style="{background:'#f2f2f2',color:'#555',textAlign: 'center'}"
                border
                style="width: 100%;"
            >
                <el-table-column prop="mobile" label="用户名" align="center" />
                <el-table-column prop="mobile" label="手机号" align="center" />
                <el-table-column prop="mobile" label="余额变化" align="center" />
                <el-table-column prop="mobile" label="当前余额" align="center" />
                <el-table-column prop="mobile" label="备注" align="center" />
                <el-table-column prop="mobile" label="操作时间" align="center" />
                <!--<el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="handleClick(scope.row)">退款</el-button>
                    </template>
                </el-table-column>-->
            </el-table>
            <Pagination
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                :total="total"
                @handle-size-change="handleSizeChange"
                @handle-current-change="handleCurrentChange"
            />
        </page-main>
    </div>
</template>

<script>
export default {
    name: 'BalanceWater',
    data() {
        return {
            search: {
                ordersn: '',
                mobile: '',
                joinTime: []
            },
            tableData: [
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }
            ],
            currentPage: 1,
            pageSize: 10,
            total: 100,
            pageSizes: [5, 10, 15, 20]
        }
    },
    methods: {
        changeTime(val) {
            this.$nextTick(() => {
                if (val == null) {
                    this.search.joinTime = []
                }
            })
        },
        // 分页 2 个方法
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`)
            this.pageSize = val
            // this.$SpinkitLoading({type: 'chase', size: 50, color: '#ffffff'})
            // this._getOrderList() // 获取订单列表(待确认)
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`)
            this.currentPage = val
            // this.$SpinkitLoading({type: 'chase', size: 50, color: '#ffffff'})
            // this._getOrderList() // 获取订单列表(待确认)
        }
    }
}
</script>

<!--<style scoped lang="scss">
    div {
        color: red;
    }
</style>-->
